<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="cn">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>demo</title>

<script type="text/javascript" src="js/jquery-1.7.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-ui.js" charset="utf-8"></script>
<script type="text/javascript" src="js/pager.js" charset="utf-8"></script>
<script type="text/javascript" src="js/common.js" charset="utf-8"></script>
<link href="js/pager.css" rel="stylesheet" type="text/css"/>

<style type="text/css">
body {
	font-family: "微软雅黑";
}

</style>
</head>
<body>
	<a target="_blank" href="http://git.oschina.net/manbab/bootpager">项目目录</a>

		<div style="width: 100%; min-height: 540px; height: auto; overflow: auto;">
			
				
			<button  type="button" onclick="$('#new').click();">new</button>		
			<button  type="button" onclick="$('#batchedit').click();">batchedit</button>	
			<button  type="button" onclick="$('#delete').click();">delete</button>	
			<button  type="button" onclick="$('#batchdelete').click();">batchdelete</button>	
			<button  type="button" onclick="$('#ajax').click();">ajax</button>	
			<button  type="button" onclick="$('#batchajax').click();">batchajax</button>	
						
			<form id="eee" class=""  style="border: 1px solid #000;width:700px; ">
				<div>
				<input type="text" class="span2" name="name" >
				
				
				<button class="btn btn-primary" type="submit">查找</button>
				
			
				<button id="new"  type="button" data-target="new" data-href="testinsert.jsp?id=1" data-container="#tcdiv">new</button>		
				<button id="batchedit"  type="button" data-target="batchedit" data-href="testinsert.jsp" data-container="#tcdiv">batchedit</button>	
				<button id="delete"  type="button" data-target="delete" data-href="testajax.jsp" data-callbackform="#eee">delete</button>	
				<button id="batchdelete"  type="button" data-target="batchdelete" data-href="testajax.jsp" data-callbackform="#eee">batchdelete</button>	
				<button id="ajax"  type="button" data-target="ajax" data-href="testajax.jsp" data-callbackform="#eee">ajax</button>
				<button id="batchajax"  type="button" data-target="batchajax" data-href="testajax.jsp" data-callbackform="#eee">batchajax</button>	
				</div>
			</form>
					
				
			<div id="divs1" style="height:250px;width:800px;">
				
			
			</div>
			<div style="width:700px;" data-target="pager" data-toggle="#divs1" data-pagetype="4" data-pagesize="10" data-url="testload.jsp" data-form="#eee"></div>

<hr/>
<br/>
<br/>
<hr/>

			<form id="eee1" class=""  style="border: 1px solid #000 ">
				<div>
				<input type="text" class="span2" name="name" >
				
				
				<button class="btn btn-primary" type="submit">查找</button>
				
			
				</div>
			</form>
					
				
			<div id="divs2" style="height:250px;width:700px;">
				
			
			</div>
			<div style="" data-target="pager" data-toggle="#divs2" data-pagetype="3" data-pagesize="30" data-url="testload.jsp" data-form="#eee1"></div>


			
		</div>
		
		<!-- 弹出层 -->
<div id="tcdiv" style="display:none;position:fixed;width:400px;height:300px;background:#acac00">
	<button  type="button" data-target="close" data-container="#tcdiv">close</button>	
</div>

<script>
//在id=ajax按钮功能完成以后执行的回调方法
$("#ajax").on("callback",function(event,data){
	alert("回调方法："+data.code);
	//$("#eee1").submit();
});
</script>

</body>